Brief: Illustration in motion
We were tasked with redesigning and trending an icon on a chosen platform and creating a new
micro-animation.We needed to take into consideration user communication, the audience itself and different types of styles in order to maximize the interaction when designing the icon.
In terms of animation or “micro-interaction,” we need to structure it in accordance to a "trigger", a set of rules, feedback and loops. While creating the micro-interaction we are also tasked with put as many thoughts onto paper as possible and animate the feedback. Our full icon redesign should be the same size as the platforms icon size, as well as follow the various principles of icon design, animation and micro-interaction.
Micro-interactions
Our micro-animations followed the theme of exploration, as reddit is a program of finding new communities. Therefore, we wanted to create an effect of a rocket taking off into space, on it's way to find new lands, or in this case, groups of people. The animations needed to be short, clear and easily recognizable, hence the basic movement and shapes. We used the colours of reddit as well as various principles of animations to execute the action and gain user appropriation to the feeling of the platform.
Design process
We began by drawing as many icon retrends as possible. After a feedback session we came to a conclusion that our icon should reflect a rocket or space ship in a unique way, whilst keeping the reddit arrow in mind. This gave us a clear path to follow. After digitizing a few options we found the general shape our icon would look like. This lead us to the last step which was generating as many variations as possible while using said general shape. This process eventually lead us to our final icon retrend.
Retrended icon
Our re-trended icon is a combination of the arrow symbol and the rocket index. Keeping the original arrow from reddit and morphing it into a "rocket". The shape was then mirrored at a smaller scaled diagonally below the "rocket" to create a "flame".
Animation storyboards
1
In this animation, we used squash and stretch, adding volume. The icon is staged to be the main focus along a diagonal axis, moving upwards diagonally and then pulling back to the center of the mass. The flame has an arched animation, creating the appearance of movement. Timing has been thoughtfully applied to emphasise movement. To do this, we used a shaking motion to create anticipation.
2
To create this micro-animation, I decided to use the principles of animation to create an effective and fun effect. I used staging in carefully setting my elements up on a grid. Aniticipation was used as when the flame gets smaller, the user anticipates the next movement. Pose to pose was used as the medium of frame change. Next, overlapping action was included as the two elements follow simultaneous action.
Finally, appeal was used as the orange flame stands out in high contrast to the yellow flame.
Finally, appeal was used as the orange flame stands out in high contrast to the yellow flame.
3
Staging and timing along with, emphasis have applied to this mirco-animation. The rotation of the arrow is staged to look like a rocket taking of this is emphasized by the flame under the icon with appropriate timing. The squash and stretch method has been applied to the flames to mimic that of a takeoff action.
Mock-up
Hope you enjoyed!
